<template>
  <div class="wrap">
    <div class="wrap-top flex">
      <div class="form-search flex">
        <el-input v-model="form.keyword" placeholder="请输入"></el-input>
        <p class="flex-center flex-align-items-center pointer">
          <i class="iconfont icon-sousuo"></i>
        </p>
      </div>
    </div>
    <div class="list">
      <div v-for="item in list" :key="item.id" class="item flex-between">
        <div class="item-left">
          <p class="item-name ellipsis-1 font-14-B">{{ item.templateName }}</p>
          <p class="item-desc flex">
            <span class="font-12">红人分类：{{ item.content }}</span>
            <span class="font-12">红人国家：{{ item.content }}</span>
          </p>
          <p class="item-desc flex">
            <span class="font-12">红人平台：{{ item.content }}</span>
          </p>
          <p class="item-desc flex">
            <span class="font-12">创建日期：{{ item.time }}</span>
          </p>
        </div>
        <div class="item-right flex-between flex-column">
          <p class="to-detail font-12 pointer flex flex-align-items-center" @click="toDetail(item)">
            详情<i class="iconfont icon-a-jiantou-you"></i>
          </p>
          <div class="item-btns flex">
            <p class="item-btn font-14 pointer" @click="checkHandleClick(item)">选择</p>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination flex flex-align-items-center">
      <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
    </div>
  </div>

  <edit-sign v-if="editSignInfo.show" :info="editSignInfo" @close="editSignInfo.show = false"></edit-sign>
</template> 
<script setup>
import EditSign from './editSign.vue';
import { defineEmits, ref } from 'vue';
import { ElMessageBox } from 'element-plus';

const emit = defineEmits(['change']);

const form = ref({
  total: 100
});
const list = ref([
  {
    templateName: '第一阶段，首次邀约【有预算】',
    emailName: 'xxxxx',
    content: 'xxxxxx',
    time: '2023-12-18',
    scene: 'xxx',
    lang: 1,
    id: 1
  }
]);
const editSignInfo = ref({
  show: false
});

const toDetail = e => {
  if (e) {
    editSignInfo.value = {
      show: true,
      ...e
    }
  } else {
    editSignInfo.value = {
      show: true
    }
  }
}
const checkHandleClick = e => {
  emit('change', e);
}
const delItem = e => {
  console.log(e);
  ElMessageBox.confirm(
    `确认删除该签名？`,
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding: 0 24px;
  position: relative;

  .wrap-top {
    margin-bottom: 24px;

    .form-search {
      &::v-deep {
        .el-input {
          width: 188px;
          height: 32px;
        }
      }

      p {
        width: 32px;
        height: 32px;
        background: @main-color;
        border-radius: 0 2px 2px 0;
        position: relative;
        right: 2px;

        i {
          color: #fff;
        }
      }
    }
  }

  .list {
    height: calc(100% - 135px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    .item {
      padding: 16px 10px 10px 16px;
      background: #fff;
      box-shadow: 0 3px 8px 0 rgba(0,0,0,.08);
      border-radius: 2px;
      margin-bottom: 16px;

      .item-left {
        width: 300px;
        height: 100px;

        .item-name {
          color: #333;
          margin-bottom: 12px;
        }

        .item-desc {
          margin-bottom: 7px;

          &:last-child {
            margin-bottom: 0;
          }

          span {
            color: hsla(0, 0%, 46%, .85);

            &:nth-child(2) {
              margin-left: 40px;
            }
          }
        }
      }

      .item-right {
        .to-detail {
          justify-content: end;
          color: #666;

          i {
            color: #666;
            margin-left: 5px;
            font-size: 12px;
          }
        }

        .item-btns {
          justify-content: end;

          .item-btn {
            width: 62px;
            height: 32px;
            text-align: center;
            border-radius: 2px;
            background: rgba(255, 82, 119, .051) !important;
            line-height: 30px;
            border: 1px solid @main-color;
            color: @main-color;
          }
        }
      }
    }
  }

  .pagination {
    position: absolute;
    left: 0;
    bottom: -88px;
    width: 100%;
    height: 64px;
    justify-content: end;
    padding-right: 24px;
  }
}
</style>